<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .family>div {
            font-size: 32px;
        }
        .family>div:first-child {
            font-family: 'Times New Roman', Times, serif;
        }
        .family>div:nth-child(2) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
    </style>
</head>
<body>
    <h1>字体相关css</h1>
    <h2>字体族 font-family</h2>
    <div class="family">
        <div>中科大</div>
        <div>中科大</div>
    </div>
    <h2>字体风格 font-style</h2>
    <div>
        <div style="font-style: normal;">normal: 中科大</div>
        <div style="font-style: italic;">italic: 中科大</div>
        <div style="font-style: oblique;">oblique: 中科大</div>
    </div>
    <h2>字体粗细 font-weight</h2>
    <div>
        <div style="font-weight:lighter">light: 中科大</div>
        <div style="font-weight:100">100: 中科大</div>
        <div style="font-weight: normal;">normal: 中科大</div>
        <div style="font-weight: 400;">400: 中科大</div>
        <div style="font-weight: bold;">bold: 中科大</div>
        <div style="font-weight: 600;">600: 中科大</div>
    </div>
    <h2>复合属性 font</h2>
    <div>
        复合属性的最后两个属性值必须是 font-size font-family，属性间空格隔开。
        <div style="font: 20px 'Times New Roman', Times, serif;">20px 'Times New Roman', Times, serif: 中科大</div>
        <div style="font: italic 20px 'Times New Roman', Times, serif;">italic 20px 'Times New Roman', Times, serif: 中科大</div>
        <div style="font: 20px italic 'Times New Roman', Times, serif;">20px italic 'Times New Roman', Times, serif: 中科大</div>
        <div style="font: italic bold 20px 'Times New Roman', Times, serif;">italic bold 20px 'Times New Roman', Times, serif: 中科大</div>
    </div>
</body>
</html>